<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login-wrapper {
            width: 785px;
            height: 378px;
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            margin: 100px auto;
        }

        .img-wrapper {
            float: left;
            width: 276px;
            height: 348px;
            background: url("../public/csss手册4.2.3.chm.png");
            margin-left: 30px;
            margin-top: 15px;
        }

        .login {
            float: left;
            width: 452px;
            height: 348px;
            margin-left: 15px;
            margin-top: 15px;
        }

        .login-top {
            position: relative;
            height: 75px;
            width: 100%;
            border-bottom: 1px solid #e8e8e8;
            text-align: center;
            line-height: 75px;
        }

        .login-top strong {
            font-size: 26px;
        }

        .login-top img {
            position: absolute;
            left: 90px;
            top: 20px;
        }

        .login-main {
            position: relative;
            box-sizing: border-box;
            width: 452px;
            height: 273px;
            text-align: center;
            padding-top: 45px;
        }
        .extra button,
        .extra input
        {
            width: 78px;
            height: 24px;
            font-size: 10px;
            margin-right: 30px;
            border: 1px solid #CCCCCC;
        }
        .extra{
            position: absolute;
            left: 69px;
            margin-top: 85px;
        }
        .password{
            margin-top: 30px;
        }
        .username input,
        .password input{
            box-sizing: border-box;
            width: 252px;
            height: 32px;
            border: 1px solid #CCCCCC;
            outline-style: none;
            padding-left: 11px;
        }
        .remember{
            position: absolute;
            left: 60px;
            margin-top: 33px;
        }
    </style>
</head>
<body>
<div class="login-wrapper">
    <div class="img-wrapper"></div>
    <div class="login">
        <div class="login-top">
            <img src="../public/090402.png" alt="">
            <strong>系统登录</strong>
        </div>
        <form action="" class="login-main">
            <div class="username">
                <label for="username">用户名：</label>
                <input type="text" id="username" placeholder="请输入您的用户名！">
            </div>
            <div class="password">
                <label for="password">密&nbsp&nbsp&nbsp&nbsp码：</label>
                <input type="text" id="password" placeholder="请输入您的登录密码！">
            </div>
            <div class="remember">
                <input type="radio" id="remember-password">
                <label for="remember-password">记住密码</label>
            </div>
            <div class="extra">
                <button>登录</button>
                <input type="reset" value="重置">
                <button>注册</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
